<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Only CSS: Water Surface #CodePenChallenge</title>
  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="attention">鼠标移动查看演示</div>

<div class="container">
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="trigger"></div>
  <div class="monitor">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
</div>
  
  

</body>

</html>
